<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>

<div>
	<button onclick="quan(1)">全选</button>
	<button onclick="quan(2)">取消全选</button>
	<button onclick="quan(3)">反选</button>
	<button onclick="add()">添加</button>
	<hr>
	<input type="checkbox" name="">语文 <br>
	<input type="checkbox" name="">语文 <br>
	<input type="checkbox" name="">语文 <br>
	<input type="checkbox" name="">语文 <br>
	<input type="checkbox" name="">语文 <br>
	<input type="checkbox" name="">语文 <br>
	<input type="checkbox" name="">语文 <br>
	<input type="checkbox" name="">语文 <br>
	<input type="checkbox" name="">语文 <br>
	<input type="checkbox" name="">语文 <br>

</div>

<script type="text/javascript">
	//getElementsByTagName会实时更新 querySelectorAll 不会只会获取已有的
	let input = document.getElementsByTagName('input')
	function quan(a){
		for(var i = 0;i < input.length; i++){
		if(a == 1){	
			input[i].checked = true
		}else if(a == 2){
			input[i].checked = false
		}else {
			input[i].checked = !input[i].checked
		}
	
	}
}
	function add(){
		let arr = ['数据结构','计算机组成原理','操作系统','计算机网络']
		/*console.log(arr[parseInt(Math.random()*arr.length)])
		let inp = document.createElement('input')
		inp.type = 'checkbox'
		let span = document.createElement('span')
		span.innerText = arr[parseInt(Math.random()*arr.length)]
		let br = document.createElement('br')
		let div = document.getElementsByTagName('div')[0]
		div.appendChild(inp)
		div.appendChild(span)
		div.appendChild(br)*/
		let div = document.getElementsByTagName('div')[0]

		let p =document.createElement('div')
		p.innerHTML =`<input type="checkbox" name="">` + arr[parseInt(Math.random()*arr.length)]

		div.appendChild(p)

	}
</script>
</body>
</html>